<template>
  <div>
    <a-row :gutter="10">
      <a-col :span="3">
        <a-tabs
          v-model="groupTab"
          type="editable-card"
          tabPosition="left"
          @edit="onEdit"
          :tabBarStyle="{width:'100%'}">
          <a-tab-pane :key="1" tab="分组1"></a-tab-pane>
          <a-tab-pane :key="2" tab="分组2"></a-tab-pane>
          <a-tab-pane :key="3" tab="分组3"></a-tab-pane>
          <a-tab-pane :key="4" tab="分组4"></a-tab-pane>
        </a-tabs>
      </a-col>
      <a-col :span="21">
        <div class="mb10">
          <a-form :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
            <a-row>
              <a-col :span="6">
                <a-form-item label="查询条件" style="margin-bottom:0;">
                  <ZgInput></ZgInput>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="查询条件" style="margin-bottom:0;">
                  <ZgInput></ZgInput>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="查询条件" style="margin-bottom:0;">
                  <ZgInput></ZgInput>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <div class="flx-s pt4 ml15">
                  <ZgButton type="default" class="mr10" icon="refresh">重置</ZgButton>
                  <ZgButton icon="search">查询</ZgButton>
                </div>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <a-table
          size="small"
          bordered
          :customHeaderRow="()=>{return { style: { background: '#f2f2f2' } }}"
          :pagination="false"
          :data-source="list"
          :scroll="{ y: winHeight - 200 }">
          <a-table-column :width="45" title="序号">
            <template slot-scope="text,record,index">
              <div class="wfull tac">{{ index+1 }}</div>
            </template>
          </a-table-column>
          <a-table-column title="字段名称">
            <template slot-scope="scope">
              {{ scope.name }}
            </template>
          </a-table-column>
          <a-table-column title="字段编码">
            <template slot-scope="scope">
              {{ scope.code }}
            </template>
          </a-table-column>
          <a-table-column title="字段类型">
            <template slot-scope="scope">
              {{ scope.type }}
            </template>
          </a-table-column>
          <a-table-column :width="200" title="操作">
            <template slot-scope="scope">
              <div class="flx-s">
                <ZgButton class="mr10" icon="trash" @click="del(scope)">删除</ZgButton>
                <ZgButton type="default" icon="edit" @click="update(scope)">修改</ZgButton>
              </div>
            </template>
          </a-table-column>
        </a-table>
        <ZgDialog ref="editDialog" :title="'字段编辑'" :width="'400px'" :showFooter="false">
          <div class="field-form">
            <a-form layout="vertical">
              <a-form-item label="字段名称">
                <ZgInput v-model="editForm.name" />
              </a-form-item>
              <a-form-item label="字段编码">
                <ZgInput v-model="editForm.code" />
              </a-form-item>
              <a-form-item label="字段类型">
                <ZgSelect v-model="editForm.type" :options="typeOptions" />
              </a-form-item>
            </a-form>
          </div>
        </ZgDialog>
      </a-col>
    </a-row>
  </div>
</template>
<script>
export default {
  components: {
  },
  data () {
    return {
      groupTab: 1,
      list: [
        { key: '1', id: '1', name: '字段1', code: 'c1', type: '字符串' },
        { key: '2', id: '2', name: '字段2', code: 'c2', type: '浮点数' },
        { key: '3', id: '3', name: '字段3', code: 'c3', type: '整数' },
        { key: '4', id: '4', name: '字段4', code: 'c4', type: '布尔值' },
        { key: '5', id: '5', name: '字段5', code: 'c5', type: '日期' },
        { key: '6', id: '1', name: '字段1', code: 'c1', type: '字符串' },
        { key: '7', id: '2', name: '字段2', code: 'c2', type: '浮点数' },
        { key: '8', id: '3', name: '字段3', code: 'c3', type: '整数' },
        { key: '9', id: '4', name: '字段4', code: 'c4', type: '布尔值' },
        { key: '10', id: '5', name: '字段5', code: 'c5', type: '日期' }
      ],
      conditions: [
        { code: 'name', compType: '单行文本', label: '名称/编码', defaultVal: '' },
        { code: 'type', compType: '下拉选择', label: '类型', defaultVal: '', extra: { 下拉选项: [{ value: '1', label: '字符串' }, { value: '2', label: '浮点数' }] } }
        // { code: 'age', compType: '整数', label: '年龄', defaultVal: 0 },
        // { code: 'political', compType: '字典', label: '政治面貌', defaultVal: '', extra: { 字典类型: 'political' } }
        // { code: 'is_use', compType: '布尔', label: '启用', defaultVal: 'false' }
        // { code: 'birth', compType: '日期区间', label: '生日', defaultVal: ['', ''] },
        // { code: 'age', compType: '整数区间', label: '年龄', defaultVal: [0, 100] },
        // { code: 'birth1', compType: '日期', label: '生日1', defaultVal: '2025-05-23' },
      ],
      dataBtns: [
        { key: 1, name: '删除', icon: 'fa-trash', isShow: () => { return true } },
        { key: 2, name: '修改', icon: 'fa-pencil', isShow: () => { return true } }
      ],
      editForm: {
        name: '',
        code: '',
        type: ''
      },
      typeOptions: [
        { value: '字符串', label: '字符串' },
        { value: '浮点数', label: '浮点数' },
        { value: '整数', label: '整数' },
        { value: '布尔值', label: '布尔值' },
        { value: '日期', label: '日期' }
      ]
    }
  },
  methods: {
    onSearch () {
    },
    del () {},
    update (row) {
      this.editForm = { ...row }
      this.$refs.editDialog.open()
    },
    onEdit (targetKey, action) {
      if (action === 'add') {

      } else {

      }
      console.log('我走了这里了')
      console.log(targetKey, action)
    }
  }
}
</script>

<style lang="scss" scoped>
.field-form {
  padding: 18px 8px 0 8px;
}
</style>
